<template>
  <div class="contents">
    <el-tabs v-model="activeName">
      <el-tab-pane label="应收账款汇总" name="first">
        <el-form
          :inline="true"
          label-position="right"
          label-width="80px"
          :model="dataFilter"
          ref="ruleForm"
        >
          <!-- <el-form-item label="仓库:" prop="warehouseId">
            <el-select
              v-model="dataFilter.warehouseId"
              class="writeWidth"
              placeholder="全部"
            >
              <el-option
                v-for="item in opt1"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item> -->

          <!-- <el-form-item>
            <el-button style="margin-left: 85px" type="text" @click="clickOpen">
              <span :style="{ visibility: openCol ? 'hidden' : 'visible' }">
                收起
              </span>
              高级筛选
              <vab-icon
                :icon="openCol ? 'arrow-down-s-line' : 'arrow-up-s-line'"
              />
            </el-button>
          </el-form-item> -->
          <!-- <br /> -->
          <div v-show="openCol">
            <el-form-item label="搜索:" prop="search">
              <el-input
                style="width: 255px"
                v-model="dataFilter.search"
                class="writeWidth"
                placeholder="请输入客户名称／集团名称／手机号"
              />
            </el-form-item>
            <el-form-item
              :style="{ visibility: !openCol ? 'hidden' : 'visible' }"
            >
              <!-- <el-button type="primary" @click="checkPagging()">查询</el-button> -->
              <!-- <el-button>导出</el-button> -->
            </el-form-item>
            <!-- <el-form-item label="客户类型:" prop="categoryId">
              <el-select
                v-model="quertInfo.categoryId"
                class="writeWidth"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in optOfType"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item> -->
            <!-- <el-form-item label="所属集团:" prop="groupId">
              <el-select
                v-model="quertInfo.groupId"
                class="writeWidth"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in optOfGroup"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item> -->
            <!-- <el-form-item label="业务员:">
              <el-select
                v-model="value"
                class="writeWidth"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in opt4"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item> -->
            <el-form-item label="起止日期:">
              <el-date-picker
                style="width: 205px"
                v-model="delivery_date"
                class="writeWidth"
                end-placeholder="结束日期"
                range-separator="-"
                start-placeholder="开始日期"
                type="daterange"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
            <!-- <el-form-item
              label="手机号:"
              prop="p_phone"
            >
              <el-input
                style="width: 200px"
                v-model="quertInfo.p_phone"
                placeholder="请输入手机号"
              ></el-input>
            </el-form-item> -->
            <el-form-item>
              <el-button type="primary" @click="triggerSummaryOfReceivables()">查询</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
              <!-- <el-button>导出</el-button> -->
            </el-form-item>
            <!-- <el-form-item
              v-show="activeName == 'second'"
              label="结算日期:"
              prop=""
            >
              <el-date-picker
                v-model="value"
                class="writeWidth"
                end-placeholder="结束日期"
                range-separator="-"
                start-placeholder="开始日期"
                type="daterange"
              />
            </el-form-item> -->
            <br />
          </div>
        </el-form>
        <div>
          <el-table :data="table1" style="width: 100%; margin-top: 10px">
            <!-- <el-table-column
              prop="customerInfo.code"
              label="客户编码"
            ></el-table-column> -->
            <el-table-column
              prop="customer_name"
              label="客户名称"
            ></el-table-column>
            <el-table-column
              prop="group_name"
              label="集团名称"
            ></el-table-column>
            <!-- <el-table-column
              prop="address"
              label="所属业务员"
              width="120px"
            ></el-table-column> -->
            <el-table-column prop="total" label="应收金额">
              <template slot-scope="scope">
                {{
                  (scope.row.sign_money - scope.row.return_money) / 100
                }}
              </template>
            </el-table-column>
            <!-- <el-table-column
              prop="totalPayed"
              label="已收金额"
            ></el-table-column>
            <el-table-column
              prop="totalUnpayed"
              label="未收金额"
            ></el-table-column> -->
            <!-- <el-table-column
              prop="customerAddress.contacts"
              label="联系人"
            ></el-table-column> -->
            <el-table-column prop="customer_phone" label="手机">
              <!-- </el-table-column>
               <el-table-column
              prop="customerAddress.phone"
              label="操作"
            >
           <el-button>保存</el-button>
           <el-button>取消</el-button> -->
            </el-table-column>
          </el-table>
          <div style="margin-top: 20px" v-show="false">
            <span style="padding: 0 6px">
              当前页合计应收金额:￥{{ combined.toFixed(2) / 100 }}
            </span>
          </div>
          <!-- <el-pagination
            background
            layout="total, prev, pager, next,sizes, jumper"
            :page-sizes="[10, 20, 30, 40, 50]"
            style="text-align: middel"
            :total="total"
            :page-size="this.params.size"
            :current-page="this.params.current"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          /> -->
        </div>
      </el-tab-pane>

      <!-- 客户结算流水 -->
      <!-- <el-tab-pane label="客户结算流水" name="second">
        <el-form
          :inline="true"
          label-position="right"
          label-width="80px"
          :model="dataFiltersss"
          ref="ruleFormsss"
        >
          <el-form-item label="仓库:" prop="warehouseId">
            <el-select
              v-model="dataFiltersss.warehouseId"
              class="writeWidth"
              placeholder="全部"
            >
              <el-option
                v-for="item in opt1"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="搜索:" prop="name">
            <el-input
              v-model="dataFiltersss.name"
              class="writeWidth"
              placeholder="请输入客户名称／联系人／手机号"
            />
          </el-form-item>
          <el-form-item
            :style="{ visibility: !openCol ? 'hidden' : 'visible' }"
          >
            <el-button type="primary" @click="checkgetSettlement()">
              查询
            </el-button>
            <el-button>导出</el-button>
          </el-form-item>
          <el-form-item>
            <el-button style="margin-left: 85px" type="text" @click="clickOpen">
              <span :style="{ visibility: openCol ? 'hidden' : 'visible' }">
                收起
              </span>
              高级筛选
              <vab-icon
                :icon="openCol ? 'arrow-down-s-line' : 'arrow-up-s-line'"
              />
            </el-button>
          </el-form-item>
          <div v-show="!openCol">
            <el-form-item label="客户类型:" prop="categoryId">
              <el-select
                v-model="dataFiltersss.categoryId"
                class="writeWidth"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in optOfType"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="所属集团:" prop="groupId">
              <el-select
                v-model="dataFiltersss.groupId"
                class="writeWidth"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in optOfGroup"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="业务员:">
              <el-select
                v-model="value"
                class="writeWidth"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in opt4"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="发货日期:" prop="timeList">
              <el-date-picker
                v-model="dataFiltersss.timeList"
                class="writeWidth"
                end-placeholder="结束日期"
                range-separator="-"
                start-placeholder="开始日期"
                type="daterange"
              />
            </el-form-item>
            <el-form-item
              v-show="activeName == 'second'"
              label="结算日期:"
              prop="statementTimeList"
            >
              <el-date-picker
                v-model="dataFiltersss.statementTimeList"
                class="writeWidth"
                end-placeholder="结束日期"
                range-separator="-"
                start-placeholder="开始日期"
                type="daterange"
              />
            </el-form-item>
            <br />
            <el-form-item style="margin-left: 80px">
              <el-button type="primary" @click="checkgetSettlement()">
                查询
              </el-button>
              <el-button @click="resetFormsss('ruleFormsss')">重置</el-button>
              <el-button>导出</el-button>
            </el-form-item>
          </div>
        </el-form>
        <div>
          <el-table
            :data="table2"
            show-summary
            style="width: 100%; margin-top: 10px"
          >
            <el-table-column
              prop="customerInfo.code"
              label="客户编码"
            ></el-table-column>
            <el-table-column
              prop="customerInfo.name"
              label="客户名称"
            ></el-table-column>
            <el-table-column
              prop="groupname"
              label="集团名称"
            ></el-table-column>
            <el-table-column prop="name" label="所属业务员"></el-table-column>
            <el-table-column prop="no" label="结算单号"></el-table-column>
            <el-table-column prop="name" label="业务类型"></el-table-column>
            <el-table-column prop="name" label="应收金额"></el-table-column>
            <el-table-column prop="name" label="实收金额"></el-table-column>
            <el-table-column prop="name" label="抹零"></el-table-column>
            <el-table-column
              prop="financePayments.channel"
              label="支付方式"
            ></el-table-column>
            <el-table-column
              prop="financePayments.ballanceNo"
              label="原始单号"
            ></el-table-column>
            <el-table-column
              prop="financePayments.reciever"
              label="收款人"
            ></el-table-column>
            <el-table-column
              prop="financePayments.paymentTime"
              label="结算日期"
            ></el-table-column>
            <el-table-column prop="name" label="单据日期"></el-table-column>
          </el-table>
          <el-pagination
            background
            layout="total, prev, pager, next,sizes, jumper"
            :page-sizes="[10, 20, 30, 40, 100]"
            style="text-align: middel"
            :total="total01"
            :page-size="dataFiltersss.pagesize"
            :current-page="dataFiltersss.current"
            @size-change="handleSizeChangesss"
            @current-change="handleCurrentChangesss"
          />
        </div>
      </el-tab-pane> -->
    </el-tabs>
  </div>
</template>

<script>
import { getList } from '@/api/Finance/Customeraccounts'
import {
  recordableaccount,
  SummaryOfReceivables,
} from '@/api/Finance/receiptSum'
import { getAllGroup } from '@/api/customer/customerProfile'
import { TypePagingQuery } from '@/api/customer/customerType'

export default {
  data() {
    return {
      dataFilter: {
        from_sign_date: '',
        to_sign_date: '',
        search: '',
      },
      combined: 0,
      GoStop: {
        timeList: '',
      },
      delivery_date: [],
      params: {
        current: 1,
        size: 10,
      },
      quertInfo: {
        from_sign_date: '',
        to_sign_date: '',
        search: '',
      },
      inputOfNum: null,

      activeName: 'first',
      openCol: true,
      opt1: [],
      optOfType: [],
      optOfGroup: [],
      opt4: [],
      value: '',
      total: 0,
      total01: 0,
      table1: [],
      table2: [],
    }
  },
  created() {
    this.query()
    this.selectGroup()
    // this.triggerpayableaccount()
    this.triggerSummaryOfReceivables()
  },
  methods: {
    checkPagging() {
      // this.triggerpayableaccount()
    },
    async triggerSummaryOfReceivables() {
      const res = await SummaryOfReceivables(this.dataFilter)
      this.table1 = res.data
    },

    //供应商应收详情账款getList()
    async triggerpayableaccount() {
      this.combined = 0
      this.quertInfo.from_sign_date = this.delivery_date[0]
      this.quertInfo.to_sign_date = this.delivery_date[1]
      const res = await recordableaccount(this.params, this.quertInfo)
      this.table1 = res.list
      this.total = res.total
      this.table1.forEach((item) => {
        this.combined =
          this.combined + (item.signfor_subtotal - item.return_price)
      })
    },
    //分页点击事件。
    handleSizeChange(val) {
      this.params.size = val
      // this.triggerpayableaccount()
    },
    //分页点击事件。
    handleCurrentChange(val) {
      this.params.current = val
      // this.triggerpayableaccount()
    },
    //获取客户
    async query() {
      const res = await TypePagingQuery(1, 10)
      this.optOfType = res.data.list
    },
    //获取集团
    async selectGroup() {
      const res = await getAllGroup()
      this.optOfGroup = res.data
    },
    resetForm(formName) {
      ;(this.delivery_date = []), this.$refs[formName].resetFields()
    },
    // resetFormsss(formName) {
    //   this.$refs[formName].resetFields()
    // },
    clickOpen() {
      this.openCol = !this.openCol
    },
  },
}
</script>
<style lang="scss" scoped>
.contents {
  padding: 0 20px 10px;

  .writeWidth {
    width: 200px;
  }
}
</style>

